<template>
  <el-dialog
    v-if="show"
    id="embedded_popup"
    ref="embeddedPopup"
    v-el-drag-dialog
    :visible.sync="show"
    :title="title"
    :width="width"
    :top="top"
    :modal="modal"
    :fullscreen="fullscreen"
    :close-on-click-modal="false"
    :close-on-press-escape="closeOnPressEscape"
    :append-to-body="appendToBody"
    :show-close="showClose"
    @close="beforeCloseDialog"
    @open="beforeOpenDialog">
    <slot />
    <keep-alive>
      <component :is="routePage.component" ref="componentPage" :key="key" />
    </keep-alive>
  </el-dialog>
</template>
<script>
import elDragDialog from './el-drag-dialog/drag'// 导入组件
import { openModules } from './config/index'// 导入配置的页面组件
export default {
  name: 'EmbeddedPopup',
  directives: { elDragDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    modal: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    top: {
      type: String,
      default: 'initial'
    },
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    component: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      key: 1,
      routePage: {},
      loadingInstance: null
    }
  },
  computed: {
    show: {
      set(val) {
        this.$emit('update:visible', val)
      },
      get() {
        return this.visible
      }
    }
  },
  watch: {
    show(val) {
      if (val) {
        var that = this
        setTimeout(function() {
          that.$nextTick(() => {
            that.$refs.componentPage.activatedMethod()
          })
        }, 100)
      }
    },
    loading(val) {
      if (val) {
        this.loadingInstance = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.1)'
        })
      } else {
        this.loadingInstance.close()
      }
    }
  },
  mounted() {
    var openList = openModules()[0].modules
    for (var i in openList) {
      if (openList[i].refName === this.component) {
        this.routePage = openList[i]
      }
    }
  },
  methods: {
    beforeCloseDialog() {
      const dialogBody = this.$refs.embeddedPopup.$el.querySelector('.el-dialog__body')
      dialogBody.scrollTop = 0
      this.$emit('close')
    },
    beforeOpenDialog() {
      this.$emit('open')
    },
    updateData() {
      this.$emit('updateData')
    }
  }
}
</script>
<style lang="scss">
.v-modal {
  z-index: 1000 !important;
}
#embedded_popup{
  .el-dialog{
    background: #fff;
    .el-dialog__header{
      height: 45px;
      line-height: 45px;
      background: #409EFF;
      .el-dialog__title{
        color: #fff;
      }
      .el-dialog__headerbtn{
        font-size: 20px;
        .el-dialog__close{
          color: #fff;
        }
        &:focus,
        &:hover{
          .el-dialog__close{
            color: #d0c0c0;
          }
        }
      }
    }
    .el-dialog__body {
      height: calc(90vh - 45px);
      // height: calc(100vh - 45px);
      max-height: calc(100vh - 45px);
      padding: 0px 0 0;
    }
    .el-form{
      .el-form-item{
        margin-bottom: 20px;
        .el-form-item{
          margin-bottom: 0;
        }
      }
    }
  }
}
.dialog-fade-enter-active,
.dialog-fade-leave-active {
	animation: none !important;
  opacity: 1;
  transform: scaleY(1);
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center top;
}
.dialog-fade-enter,
.dialog-fade-leave-active {
  opacity: 0;
  transform: scaleY(0);
}
</style>
